<script lang="ts" setup>
import { DecodeStatus } from './composables/useDecodeTable'

defineProps<{ code: string; status: DecodeStatus }>()

const classes = {
  [DecodeStatus.Unmatched]:
    'children:text-arco-red-6! children:bg-arco-red-1! children:border-arco-red-6!',
  [DecodeStatus.Matched]:
    'children:text-arco-green-6! children:bg-arco-green-1! children:border-arco-green-6!'
}
</script>

<template>
  <i
    v-if="status === DecodeStatus.Running"
    class="i-svg-spinners-bars-scale-middle text-arco-3 mx-auto"
  />
  <a-typography-text v-else-if="status === DecodeStatus.NULL" code>NULL</a-typography-text>
  <a-typography-text v-else :class="classes[status]" code>{{ code }}</a-typography-text>
</template>
